<template>
  <div class="ruleedit">
    <el-dialog
      :title="text"
      :visible.sync="dialogRule"
      width="40%">
      <el-form :model="form" ref="form" size="medium" label-width="120px">
        <el-form-item label="菜单名:" prop="menu_name">
          <el-input v-model="form.menu_name" placeholder="请输入菜单名"></el-input>
        </el-form-item>
        <el-form-item label="父级ID:" prop="pid">
          <el-select v-model="form.pid" filterable clearable style="width: 100%;">
            <el-option
              v-for="item in menuTree"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模块名:" prop="module">
          <el-input v-model="form.module" placeholder="请输入模块名"></el-input>
        </el-form-item>
        <el-form-item label="控制器名:" prop="controller">
          <el-input v-model="form.controller" placeholder="请输入控制器名"></el-input>
        </el-form-item>
        <el-form-item label="方法名:" prop="action">
          <el-input v-model="form.action" placeholder="请输入方法名"></el-input>
        </el-form-item>
        <el-form-item label="路由名:" prop="router_name">
          <el-select v-model="form.router_name" filterable clearable style="width: 100%;">
            <el-option
              v-for="item in menuTree"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参数:" prop="params">
          <el-input v-model="form.params" placeholder="a/123/b/234"></el-input>
        </el-form-item>
        <el-form-item label="是否显示菜单:" prop="is_show">
          <el-radio-group v-model="form.is_show">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name:'RuleEdit',
    props:{
      rows: {}
    },
    data() {
      return {
        text: '',
        dialogRule: false,
        menuTree: [],
        form: {
          menu_name: '',
          pid: '',
          module: '',
          controller: '',
          action: '',
          router_name: '',
          params: '',
          is_show: ''
        }
      }
    },
    methods: {
      //打开弹窗-编辑
      openEdit() {
        this.dialogRule = true;
        this.text = "编辑菜单规则"
        this.form = {
          menu_name: this.rows.menu_name,
          pid: this.rows.pid,
          module: this.rows.module,
          controller: this.rows.controller,
          action: this.rows.action,
          router_name: this.rows.router_name,
          params: this.rows.params,
          is_show: this.rows.is_show
        }
        console.log('form',this.form)
      },
      //打开弹窗-新增
      openAdd() {
        this.dialogRule = true;
        this.text = "添加菜单规则"
      },

      //保存
      save () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            console.log('form1',this.form)
            this.dialogRule = false;
            this.form = {
              menu_name: '',
              pid: '',
              module: '',
              controller: '',
              action: '',
              router_name: '',
              params: '',
              is_show: ''
            };
            console.log('form2',this.form)
            this.$message.success('保存成功')
          } else {
            this.$message.error('表单验证失败!')
          }
        })
      },

      //关闭
      close() {
        this.dialogRule = false;
        this.form = {
          menu_name: '',
          pid: '',
          module: '',
          controller: '',
          action: '',
          router_name: '',
          params: '',
          is_show: ''
        }
      }
    }
  }
</script>

<style>
</style>
